<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { invoke } from '@tauri-apps/api'
import { getCurrent } from '@tauri-apps/api/window'
import { Search, Refresh, Monitor, Cpu, Link, Sort, ArrowUp, ArrowDown, Close } from '@element-plus/icons-vue'
import { ElNotification, ElMessage } from 'element-plus'

// 响应式数据
const portProcesses = ref([])
const loading = ref(false)
const confirmDialogVisible = ref(false)
const selectedProcess = ref(null)
const killingProcess = ref(false)
const isMaximized = ref(false)
// 添加深色模式状态
const isDarkMode = ref(false)
// 添加通用搜索状态
const globalSearchQuery = ref('')
// 添加排序相关状态
const sortColumn = ref('pid')
const sortOrder = ref('ascending')
// 添加分页相关状态
const currentPage = ref(1)
const pageSize = ref(10)
// 添加筛选状态
const activeFilters = ref([])
const availableFilters = [
  { id: 'system', label: '系统进程', icon: '🔧' },
  { id: 'browser', label: '浏览器', icon: '🌐' },
  { id: 'node', label: 'Node.js', icon: '📦' },
  { id: 'database', label: '数据库', icon: '🗃️' },
  { id: 'tcp', label: 'TCP协议', icon: '🔌' },
  { id: 'udp', label: 'UDP协议', icon: '📡' }
]

// 检测系统深色模式
const checkDarkMode = () => {
  isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
}

// 手动切换深色模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
  // 可选：保存用户偏好到本地存储
  localStorage.setItem('darkMode', isDarkMode.value);
  
  // 显示模式切换通知
  showMessage(
    isDarkMode.value ? '已切换到深色模式' : '已切换到浅色模式', 
    isDarkMode.value ? '界面已切换到深色主题，保护您的眼睛' : '界面已切换到浅色主题，显示更清晰', 
    'success'
  );
}

// 切换筛选器状态
const toggleFilter = (filterId) => {
  const index = activeFilters.value.indexOf(filterId);
  if (index === -1) {
    activeFilters.value.push(filterId);
  } else {
    activeFilters.value.splice(index, 1);
  }
}

// 重置所有筛选器
const resetFilters = () => {
  activeFilters.value = [];
  globalSearchQuery.value = '';
}

// 过滤并排序后的进程数据
const processedData = computed(() => {
  let result = portProcesses.value;
  
  // 应用搜索过滤
  if (globalSearchQuery.value) {
    const query = globalSearchQuery.value.toLowerCase();
    result = result.filter(process => 
      (process.process_name && process.process_name.toLowerCase().includes(query)) || 
      (process.local_address && process.local_address.toLowerCase().includes(query)) ||
      (process.remote_address && process.remote_address.toLowerCase().includes(query)) ||
      process.pid.toString().includes(query) ||
      process.port.toString().includes(query)
    );
  }
  
  // 应用标签筛选
  if (activeFilters.value.length > 0) {
    result = result.filter(process => {
      // 处理进程类型筛选
      if (activeFilters.value.includes('system') && getProcessIconType(process.process_name) === 'system') return true;
      if (activeFilters.value.includes('browser') && getProcessIconType(process.process_name) === 'browser') return true;
      if (activeFilters.value.includes('node') && getProcessIconType(process.process_name) === 'node') return true;
      if (activeFilters.value.includes('database') && getProcessIconType(process.process_name) === 'database') return true;
      
      // 处理协议筛选
      if (activeFilters.value.includes('tcp') && process.protocol.toLowerCase() === 'tcp') return true;
      if (activeFilters.value.includes('udp') && process.protocol.toLowerCase() === 'udp') return true;
      
      // 如果未匹配任何标签，则不显示
      return activeFilters.value.length === 0;
    });
  }
  
  // 应用排序
  if (sortColumn.value) {
    result = [...result].sort((a, b) => {
      let valueA = a[sortColumn.value];
      let valueB = b[sortColumn.value];
      
      // 处理数值型列
      if (sortColumn.value === 'pid' || sortColumn.value === 'port') {
        valueA = Number(valueA);
        valueB = Number(valueB);
      }
      
      if (sortOrder.value === 'ascending') {
        return valueA > valueB ? 1 : -1;
      } else {
        return valueA < valueB ? 1 : -1;
      }
    });
  }
  
  return result;
});

// 分页后的数据
const paginatedData = computed(() => {
  const startIdx = (currentPage.value - 1) * pageSize.value;
  return processedData.value.slice(startIdx, startIdx + pageSize.value);
});

// 总记录数
const totalItems = computed(() => {
  return processedData.value.length;
});

// 排序事件处理程序
const handleSortChange = (column) => {
  if (sortColumn.value === column.prop) {
    sortOrder.value = sortOrder.value === 'ascending' ? 'descending' : 'ascending';
  } else {
    sortColumn.value = column.prop;
    sortOrder.value = 'ascending';
  }
};

// 分页改变事件处理程序
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

// 高亮搜索结果文本
const highlightText = (text, query) => {
  if (!query || !text) return text;
  
  const regex = new RegExp(`(${query})`, 'gi');
  return text.toString().replace(regex, '<span class="highlight-text">$1</span>');
};

// 获取进程图标类型
const getProcessIconType = (processName) => {
  if (!processName) return 'default';
  
  const lowerName = processName.toLowerCase();
  
  if (lowerName.includes('system') || lowerName === 'system') return 'system';
  if (lowerName.includes('node') || lowerName.includes('npm') || lowerName.includes('yarn')) return 'node';
  if (lowerName.includes('chrome') || lowerName.includes('edge') || lowerName.includes('firefox') || lowerName.includes('browser')) return 'browser';
  if (lowerName.includes('server') || lowerName.includes('service')) return 'server';
  if (lowerName.includes('sql') || lowerName.includes('db') || lowerName.includes('mongo') || lowerName.includes('postgres')) return 'database';
  if (lowerName.includes('java')) return 'java';
  if (lowerName.includes('python') || lowerName.includes('py')) return 'python';
  
  return 'default';
}

// 窗口控制函数
const minimizeWindow = () => {
  const appWindow = getCurrent();
  appWindow.minimize();
}

const toggleMaximize = () => {
  const appWindow = getCurrent();
  appWindow.toggleMaximize();
}

const closeWindow = () => {
  const appWindow = getCurrent();
  appWindow.close();
}

// 窗口控制事件监听器
onMounted(async () => {
  const appWindow = getCurrent();

  // 检查窗口是否已最大化
  appWindow.isMaximized().then(maximized => {
    isMaximized.value = maximized;
  });

  // 监听窗口最大化/恢复事件以更新按钮图标
  appWindow.onResized(() => {
    appWindow.isMaximized().then(maximized => {
      isMaximized.value = maximized;
    });
  });

  // 检测系统深色模式或从本地存储中恢复用户偏好
  const savedDarkMode = localStorage.getItem('darkMode');
  if (savedDarkMode !== null) {
    isDarkMode.value = savedDarkMode === 'true';
  } else {
    checkDarkMode();
  }
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkDarkMode);

  // 确保DOM已完全加载后再绑定事件
  await nextTick();
  
  // 使用Vue方法绑定点击事件，而不是通过getElementById
  document.querySelector('.app-header')?.addEventListener('mousedown', (e) => {
    if (e.target.closest('#titlebar, .titlebar-button')) return; // 避免与标题栏按钮冲突
    if (e.buttons === 1) {
      // 双击头部最大化/恢复窗口
      if (e.detail === 2) {
        // 阻止默认行为（防止文本选择）
        e.preventDefault();
        // 清除任何现有的选择
        window.getSelection()?.removeAllRanges();
        toggleMaximize();
      } else {
        // 单击拖拽窗口
        appWindow.startDragging();
      }
    }
  });
  
  // 添加对窗口边框的双击监听
  document.querySelector('.app-container')?.addEventListener('dblclick', (e) => {
    // 判断点击是否在边缘区域（20px的边框区域）
    const rect = e.currentTarget.getBoundingClientRect();
    const isTopEdge = e.clientY - rect.top < 5;
    const isBottomEdge = rect.bottom - e.clientY < 5;
    const isLeftEdge = e.clientX - rect.left < 5;
    const isRightEdge = rect.right - e.clientX < 5;
    
    if (isTopEdge || isBottomEdge || isLeftEdge || isRightEdge) {
      // 阻止默认行为（防止文本选择）
      e.preventDefault();
      // 清除任何现有的选择
      window.getSelection()?.removeAllRanges();
      toggleMaximize();
    }
  });
  
  // 初始加载端口信息
  getAllPorts();
});

const notificationInfo = reactive({
  title: '',
  message: '',
  type: 'info'
})

// 获取所有端口
const getAllPorts = async () => {
  loading.value = true
  try {
    const result = await invoke('get_port_info', { port: null })
    portProcesses.value = result.map(process => ({
      ...process,
      killing: false
    }))
  } catch (error) {
    showMessage('错误', `获取端口信息失败: ${error}`, 'error')
  } finally {
    loading.value = false
  }
}

// 刷新端口列表
const refreshPorts = () => {
  getAllPorts()
}

// 终止进程
const killProcess = (process) => {
  selectedProcess.value = process
  confirmDialogVisible.value = true
}

// 确认终止进程
const confirmKillProcess = async () => {
  if (!selectedProcess.value) return
  
  killingProcess.value = true
  const pid = selectedProcess.value.pid
  
  try {
    // 更新UI状态
    const processIndex = portProcesses.value.findIndex(p => p.pid === pid)
    if (processIndex !== -1) {
      portProcesses.value[processIndex].killing = true
    }
    
    // 调用后端杀死进程
    await invoke('kill_process', { pid })
    
    // 从列表中移除被终止的进程
    portProcesses.value = portProcesses.value.filter(p => p.pid !== pid)
    
    showMessage('成功', `已成功终止进程 (PID: ${pid})`, 'success')
  } catch (error) {
    showMessage('错误', `终止进程失败: ${error}`, 'error')
    
    // 恢复UI状态
    const processIndex = portProcesses.value.findIndex(p => p.pid === pid)
    if (processIndex !== -1) {
      portProcesses.value[processIndex].killing = false
    }
  } finally {
    killingProcess.value = false
    closeConfirmDialog()
  }
}

// 关闭确认对话框
const closeConfirmDialog = () => {
  confirmDialogVisible.value = false
  selectedProcess.value = null
}

// 显示通知 - 保留但不再使用
const showNotification = (title, message, type) => {
  ElNotification({
    title,
    message,
    type,
    duration: 3000
  })
}

// 新增：显示中间消息通知
const showMessage = (title, message, type) => {
  ElMessage({
    message: message ? `${title}: ${message}` : title,
    type: type,
    duration: 1000,  // 修改为1秒
    showClose: true,
    center: true, // 确保文本居中
    customClass: 'global-message' // 添加自定义类名以用于定制样式
  })
}

// 表格行样式
const tableRowClassName = ({ row, rowIndex }) => {
  return 'port-table-row'
}
</script>

<template>
  <div class="app-container" :class="{ 'maximized': isMaximized, 'dark-mode': isDarkMode }" >
    <div class="app-header" >
      <h1>
        <img src="./assets/logo.png" class="app-logo" alt="Logo" />
        端口管理工具
      </h1>
      <div id="titlebar" class="titlebar">
        <div class="titlebar-button" id="titlebar-minimize" title="最小化" @click="minimizeWindow">
          <span class="win-icon win-minimize"></span>
        </div>
        <div class="titlebar-button" id="titlebar-maximize" :title="isMaximized ? '还原' : '最大化'" @click="toggleMaximize">
          <span class="win-icon" :class="isMaximized ? 'win-restore' : 'win-maximize'"></span>
        </div>
        <div class="titlebar-button" id="titlebar-close" title="关闭" @click="closeWindow">
          <span class="win-icon win-close"></span>
        </div>
      </div>
    </div>
    
    <div class="app-content">
      <div class="result-container">
        <div class="table-actions">
          <el-input
            v-model="globalSearchQuery"
            placeholder="搜索进程名称、端口、地址等..."
            class="global-search-input"
            :prefix-icon="Search"
            clearable
          />
          
          <!-- 添加独立的主题切换按钮 -->
          <el-button class="theme-toggle-button" @click="toggleDarkMode" type="default">
            <span class="theme-button-icon">{{ isDarkMode ? '☀️' : '🌙' }}</span>
            {{ isDarkMode ? '浅色' : '深色' }}模式
          </el-button>
          
          <el-button type="primary" @click="refreshPorts" :loading="loading" class="refresh-btn">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
        
        <!-- 筛选气泡 -->
        <div class="filter-tags">
          <div 
            v-for="filter in availableFilters" 
            :key="filter.id"
            class="filter-tag"
            :class="{ 'active': activeFilters.includes(filter.id) }"
            @click="toggleFilter(filter.id)"
          >
            <span class="filter-tag-icon">{{ filter.icon }}</span>
            <span class="filter-tag-label">{{ filter.label }}</span>
          </div>
          
          <div class="filter-tag reset-tag" @click="resetFilters">
            <span class="filter-tag-icon"><el-icon><Close /></el-icon></span>
            <span class="filter-tag-label">重置筛选</span>
          </div>
        </div>
        
        <el-empty v-if="processedData.length === 0 && !loading" description="没有找到匹配的端口占用"></el-empty>
        
        <div class="table-container" v-else>
          <el-table
            :data="paginatedData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            v-loading="loading"
            border
            @sort-change="handleSortChange"
            height="auto"
            max-height="calc(100vh - 240px)"
          >
            <el-table-column 
              prop="pid" 
              label="进程ID" 
              min-width="90"
              width="90"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :sort-by="{ prop: 'pid' }"
            >
              <template #default="scope">
                <div class="pid-cell">{{ scope.row.pid }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="process_name" label="进程名称" min-width="200">
              <template #default="scope">
                <div class="process-cell">
                  <div class="process-icon" :class="getProcessIconType(scope.row.process_name)">
                    <i v-if="getProcessIconType(scope.row.process_name) === 'system'" class="system-icon">
                      <el-icon><Monitor /></el-icon>
                    </i>
                    <i v-else-if="getProcessIconType(scope.row.process_name) === 'browser'" class="browser-icon">
                      🌐
                    </i>
                    <i v-else-if="getProcessIconType(scope.row.process_name) === 'server'" class="server-icon">
                      <el-icon><Cpu /></el-icon>
                    </i>
                    <i v-else-if="getProcessIconType(scope.row.process_name) === 'database'" class="database-icon">
                      🗃️
                    </i>
                    <i v-else-if="getProcessIconType(scope.row.process_name) === 'node'" class="node-icon">
                      📦
                    </i>
                    <i v-else-if="getProcessIconType(scope.row.process_name) === 'java'" class="java-icon">
                      ☕
                    </i>
                    <i v-else-if="getProcessIconType(scope.row.process_name) === 'python'" class="python-icon">
                      🐍
                    </i>
                    <i v-else class="default-icon">
                      <el-icon><Link /></el-icon>
                    </i>
                  </div>
                  <span class="process-name" v-html="highlightText(scope.row.process_name, globalSearchQuery)"></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column 
              prop="port" 
              label="端口" 
              min-width="90"
              width="90"
              sortable="custom"
              :sort-orders="['ascending', 'descending']"
              :sort-by="{ prop: 'port' }"
            >
              <template #default="scope">
                <div class="port-badge">{{ scope.row.port }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="protocol" label="协议" min-width="80" width="80">
              <template #default="scope">
                <span class="protocol-badge" :class="scope.row.protocol.toLowerCase()">
                  {{ scope.row.protocol }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="local_address" label="本地地址" min-width="150">
              <template #default="scope">
                <div class="address-cell" v-html="highlightText(scope.row.local_address, globalSearchQuery)"></div>
              </template>
            </el-table-column>
            <el-table-column prop="remote_address" label="远程地址" min-width="150">
              <template #default="scope">
                <div class="address-cell" v-html="highlightText(scope.row.remote_address || '无', globalSearchQuery)">
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="90" width="90" fixed="right">
              <template #default="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="killProcess(scope.row)"
                  :loading="scope.row.killing"
                  class="kill-btn"
                >
                  终止
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 分页控件 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalItems"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
            />
          </div>
        </div>
      </div>
    </div>
    
    <el-dialog
      v-model="confirmDialogVisible"
      title="确认操作"
      width="30%"
      :before-close="closeConfirmDialog"
      class="win-dialog"
    >
      <div class="dialog-content">
        <div class="dialog-icon-warning">⚠️</div>
        <p>您确定要终止进程 <strong>{{ selectedProcess?.process_name }}</strong> (PID: {{ selectedProcess?.pid }}) 吗？</p>
        <p class="dialog-subtext">终止系统进程可能会导致某些应用程序或服务无法正常工作。</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeConfirmDialog" class="cancel-btn">取消</el-button>
          <el-button type="danger" @click="confirmKillProcess" :loading="killingProcess" class="confirm-btn">
            确认终止
          </el-button>
        </span>
      </template>
    </el-dialog>
    
<!--    <el-notification-->
<!--      ref="notification"-->
<!--      :title="notificationInfo.title"-->
<!--      :message="notificationInfo.message"-->
<!--      :type="notificationInfo.type"-->
<!--      :duration="3000"-->
<!--    />-->
  </div>
</template>

<style>
:root {
  /* 应用颜色变量 - 亮色模式 */
  --app-bg-color: #f0f0f0;
  --app-content-bg: #ffffff;
  --app-header-bg: rgba(255, 255, 255, 0.9);
  --app-border-color: #e0e0e0;
  --app-text-color: #000000;
  --app-secondary-text: #505050;
  --app-primary-color: #073d6e;
  --app-primary-hover: #0071d4;
  --app-primary-active: #005baa;
  --app-danger-color: #C42B1C;
  --app-danger-hover: #d13226;
  --app-danger-active: #b22a20;
  --app-success-color: #107C10;
  --app-warning-color: #F9A825;
  --app-header-height: 36px;
  --app-border-radius: 4px;
  --app-window-radius: 10px;
  --app-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --app-input-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  --app-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  --app-transition: all 0.2s ease;
  --app-font: 'Segoe UI', 'Microsoft YaHei UI', sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: var(--app-font);
  color: var(--app-text-color);
  background-color: transparent; /* 从app-bg-color改为透明，避免圆角外显示背景色 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow: hidden;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--app-bg-color);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 及更高版本 */
  user-select: none; /* 标准语法 */
  border-radius: var(--app-window-radius); /* 添加窗口圆角 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 为窗口添加阴影增强立体感 */
}

.app-header {
  max-height: 38px; /* 降低头部最大高度 */
  height: var(--app-header-height);
  background-color: var(--app-header-bg);
  border-bottom: 1px solid var(--app-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  -webkit-app-region: drag;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 10;
  border-radius: var(--app-window-radius) var(--app-window-radius) 0 0; /* 头部圆角 */
}

.app-header h1 {
  max-height: 36px; /* 降低标题最大高度 */
  font-size: 14px; /* 减小字体大小 */
  font-weight: 500;
  margin: 0;
  color: var(--app-text-color);
  display: flex;
  align-items: center;
}

.app-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  object-fit: contain;
  border-radius: 4px; /* 添加轻微圆角 */
}

.app-icon {
  margin-right: 8px;
  font-size: 16px; /* 减小图标大小 */
}

.app-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 0 0 var(--app-window-radius) var(--app-window-radius); /* 底部圆角 */
}

.search-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}

.search-input {
  flex: 1;
  border-radius: var(--app-border-radius);
  transition: var(--app-transition);
}

.search-input:focus-within {
  box-shadow: 0 0 0 2px var(--app-primary-color);
}

.search-input .el-input__wrapper {
  border-radius: var(--app-border-radius);
  box-shadow: var(--app-input-shadow) !important;
  transition: var(--app-transition);
}

.search-input .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

.search-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--app-primary-color) !important;
}

.search-input .el-input-group__append {
  background-color: #f5f5f5;
  border: none;
  border-left: 1px solid #e0e0e0;
  padding: 0;
  overflow: hidden;
}

.search-input .el-input-group__append .el-button {
  border: none;
  height: 100%;
  border-radius: 0;
  padding: 0 15px;
  margin: 0;
  background-color: #f5f5f5;
  color: var(--app-secondary-text);
  transition: var(--app-transition);
}

.search-input .el-input-group__append .el-button:hover {
  background-color: #e8e8e8;
  color: var(--app-text-color);
}

.search-input .el-input__wrapper.is-focus .el-input__inner {
  color: var(--app-text-color);
}

/* 搜索框清除按钮样式 */
.el-input__clear {
  color: #999;
  transition: var(--app-transition);
}

.el-input__clear:hover {
  color: #666;
  background-color: #f0f0f0;
}

.refresh-btn {
  border-radius: var(--app-border-radius);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  transition: var(--app-transition);
  font-weight: 500;
  background-color: var(--app-primary-color);
  border-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  color: white;
}

.refresh-btn:hover {
  background-color: var(--app-primary-hover);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.refresh-btn:active {
  background-color: var(--app-primary-active);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .refresh-btn {
  background-color: var(--app-primary-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #202020;
}

.dark-mode .refresh-btn:hover {
  background-color: var(--app-primary-hover);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.dark-mode .refresh-btn:active {
  background-color: var(--app-primary-active);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.result-container {
  flex: 1;
  background-color: var(--app-content-bg);
  border-radius: calc(var(--app-window-radius) - 3px); /* 略小于窗口圆角 */
  box-shadow: var(--app-shadow);
  padding: 16px;
  overflow: hidden;
  transition: var(--app-transition);
  margin-bottom: 5px; /* 添加底部间距，避免内容触及窗口边缘 */
}

/* 表格样式 */
.el-table {
  border-radius: var(--app-border-radius);
  overflow: hidden;
  box-shadow: none;
  --el-table-border-color: var(--app-border-color);
  --el-table-header-bg-color: #f5f5f5;
  --el-table-header-text-color: var(--app-secondary-text);
  --el-table-row-hover-bg-color: #f0f5fc;
  --el-fill-color-lighter: #fafafa;
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

.el-table th {
  font-weight: 500;
  background-color: #f5f5f5;
  padding: 8px 0;
}

.el-table td {
  padding: 8px 0;
}

.el-table--border::after, 
.el-table--border::before,
.el-table__inner-wrapper::after, 
.el-table__inner-wrapper::before {
  display: none;
}

.port-table-row {
  transition: background-color 0.3s;
}

.port-table-row:hover {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

.port-table-row td {
  border-bottom: 1px solid var(--app-border-color) !important;
}

/* 进程图标样式 */
.process-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.process-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.system-icon {
  color: #0078D7;
}

.browser-icon {
  font-size: 14px;
}

.server-icon {
  color: #107C10;
}

.database-icon {
  font-size: 14px;
}

.node-icon {
  font-size: 14px;
}

.java-icon {
  font-size: 14px;
}

.python-icon {
  font-size: 14px;
}

.default-icon {
  color: #767676;
}

.process-name {
  max-width: 160px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

/* 端口号与协议样式 */
.port-badge {
  background-color: #E6F7FF;
  color: #0078D7;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  font-weight: 500;
  font-size: 13px;
}

.protocol-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.protocol-badge.tcp {
  background-color: #E6F7FF;
  color: #0078D7;
}

.protocol-badge.udp {
  background-color: #FFF2E6;
  color: #D76900;
}

.address-cell {
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
}

/* 按钮样式 */
.el-button {
  border-radius: var(--app-border-radius);
  font-weight: 500;
  transition: var(--app-transition);
}

.el-button--primary {
  background-color: var(--app-primary-color);
  border-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  color: white;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--app-primary-hover);
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.el-button--primary:active {
  background-color: var(--app-primary-active);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .el-button--primary {
  background-color: var(--app-primary-color);
  border-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #202020;
}

.dark-mode .el-button--primary:hover,
.dark-mode .el-button--primary:focus {
  background-color: var(--app-primary-hover);
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.dark-mode .el-button--primary:active {
  background-color: var(--app-primary-active);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.kill-btn {
  background-color: transparent;
  color: var(--app-danger-color);
  border: 1px solid var(--app-danger-color);
  padding: 4px 12px;
  font-size: 12px;
  transition: var(--app-transition);
  border-radius: 4px;
}

.kill-btn:hover {
  background-color: rgba(196, 43, 28, 0.08);
  color: var(--app-danger-color);
  box-shadow: 0 2px 4px rgba(196, 43, 28, 0.1);
}

.kill-btn:active {
  background-color: rgba(196, 43, 28, 0.12);
  box-shadow: none;
}

/* 对话框样式 */
.win-dialog .el-dialog {
  border-radius: var(--app-window-radius);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.win-dialog .el-dialog__header {
  margin: 0;
  padding: 14px 20px;
  background-color: var(--app-header-bg);
  border-bottom: 1px solid var(--app-border-color);
  border-radius: var(--app-window-radius) var(--app-window-radius) 0 0;
}

.win-dialog .el-dialog__title {
  font-weight: 500;
  font-size: 15px;
}

.win-dialog .el-dialog__body {
  padding: 20px;
}

.dialog-content {
  text-align: center;
  padding: 10px 0;
}

.dialog-icon-warning {
  font-size: 28px;
  margin-bottom: 16px;
}

.dialog-content p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--app-text-color);
  margin: 10px 0;
}

.dialog-subtext {
  color: var(--app-secondary-text);
  font-size: 12px !important;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 20px;
}

.cancel-btn {
  background-color: #f1f1f1;
  color: var(--app-text-color);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: var(--app-transition);
}

.cancel-btn:hover {
  background-color: #e5e5e5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.cancel-btn:active {
  background-color: #d8d8d8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.confirm-btn {
  background-color: var(--app-danger-color);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(196, 43, 28, 0.2);
  transition: var(--app-transition);
}

.confirm-btn:hover {
  background-color: var(--app-danger-hover);
  box-shadow: 0 3px 6px rgba(196, 43, 28, 0.25);
}

.confirm-btn:active {
  background-color: var(--app-danger-active);
  box-shadow: 0 1px 2px rgba(196, 43, 28, 0.2);
}

/* 通知样式 */
.el-notification {
  border-radius: var(--app-border-radius);
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.el-notification__title {
  font-weight: 600;
  font-size: 14px;
}

.el-notification__content {
  font-size: 13px;
  margin-top: 4px;
}

.el-notification__icon {
  margin-right: 12px;
}

/* 空状态样式 */
.el-empty {
  padding: 40px 0;
}

.el-empty__description {
  margin-top: 16px;
  color: var(--app-secondary-text);
}

/* Windows原生深色模式 */
.dark-mode {
  --app-bg-color: #202020;
  --app-content-bg: #2D2D2D;
  --app-header-bg: rgba(45, 45, 45, 0.9);
  --app-border-color: #3D3D3D;
  --app-text-color: #FFFFFF;
  --app-secondary-text: #CCCCCC;
  --app-primary-color: #0078D4;
  --app-primary-hover: #106EBE;
  --app-primary-active: #005497;
  --app-danger-color: #ffffff;
  --app-danger-hover: #ff8a96;
  --app-danger-active: #ff7a87;
  --app-success-color: #6CCE76;
  --app-warning-color: #FFD56D;
  --app-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --app-input-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dark-mode .el-table {
  --el-table-bg-color: #2D2D2D;
  --el-table-tr-bg-color: #2D2D2D;
  --el-table-border-color: #3D3D3D;
  --el-table-header-bg-color: #323232;
  --el-table-header-text-color: #CCCCCC;
  --el-table-text-color: #FFFFFF;
  --el-table-row-hover-bg-color: #383838;
  --el-fill-color-lighter: #333333;
}

.dark-mode .el-table th {
  background-color: #323232;
}

.dark-mode .port-table-row:hover {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

.dark-mode .el-empty__description {
  color: var(--app-secondary-text);
}

.dark-mode .process-icon {
  background-color: #3D3D3D;
}

.dark-mode .port-badge {
  background-color: #193C5D;
  color: #60CDFF;
}

.dark-mode .protocol-badge.tcp {
  background-color: #193C5D;
  color: #60CDFF;
}

.dark-mode .protocol-badge.udp {
  background-color: #573E28;
  color: #FFD56D;
}

.dark-mode .win-dialog .el-dialog {
  background-color: #2D2D2D;
  color: var(--app-text-color);
}

.dark-mode .win-dialog .el-dialog__title {
  color: var(--app-text-color);
}

.dark-mode .el-dialog__body {
  color: var(--app-text-color);
}

.dark-mode .win-dialog .el-dialog__header {
  background-color: #323232;
  border-color: #3D3D3D;
}

.dark-mode .search-input .el-input__wrapper {
  background-color: #333333;
  box-shadow: var(--app-input-shadow) !important;
  border-color: #444444;
}

.dark-mode .search-input .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .search-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--app-primary-color) !important;
}

.dark-mode .search-input .el-input__inner {
  color: var(--app-text-color);
}

.dark-mode .search-input .el-input-group__append {
  background-color: #333333;
  border-left: 1px solid #444444;
  border-color: transparent;
}

.dark-mode .search-input .el-input-group__append .el-button {
  background-color: #333333;
  color: #CCCCCC;
  border: none;
}

.dark-mode .search-input .el-input-group__append .el-button:hover {
  background-color: #454545;
  color: var(--app-primary-color);
}

.dark-mode .el-button--primary {
  background-color: var(--app-primary-color);
  border-color: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #202020;
}

.dark-mode .el-button--primary:hover,
.dark-mode .el-button--primary:focus {
  background-color: var(--app-primary-hover);
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.dark-mode .el-button--primary:active {
  background-color: var(--app-primary-active);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark-mode #titlebar-close:hover {
  background-color: rgba(232, 17, 35, 0.9);
}

.dark-mode #titlebar-close:hover .win-icon {
  opacity: 1;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-container {
  animation: fadeIn 0.3s ease-out;
}

.el-table tbody tr {
  animation: fadeIn 0.2s ease-out forwards;
  animation-delay: calc(var(--row-index, 0) * 0.05s);
  opacity: 0;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 5px; /* 给滚动条留出一些边距，避免触及圆角边缘 */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 窗口按钮样式 - Windows风格 */
.titlebar {
  height: 28px; /* 降低控制按钮栏高度 */
  background: transparent;
  user-select: none;
  display: flex;
  position: absolute;
  top: 0;
  right: 8px; /* 向内偏移，留出圆角空间 */
  z-index: 100;
  -webkit-app-region: no-drag;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px; /* 减小按钮宽度 */
  height: 28px; /* 减小按钮高度 */
  transition: all 0.2s ease;
  position: relative;
  -webkit-app-region: no-drag; /* 确保按钮不会被拖拽 */
  cursor: pointer;
}

/* Windows风格图标 */
.win-icon {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  opacity: 0.7;
}

/* 最小化图标 */
.win-minimize::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.5px; /* 添加圆角 */
  height: 1.5px; /* 增加厚度 */
}

/* 最大化图标 */
.win-maximize::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor; /* 增加边框厚度 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px; /* 添加轻微圆角 */
}

/* 恢复图标 - 新设计 */
.win-restore::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  clip-path: polygon(
    0% 0%,
    0% 100%,
    100% 100%,
    100% 25%,
    75% 25%,
    75% 0%
  );
}

.win-restore::after {
  display: none; /* 移除第二个方框 */
}

/* 关闭图标 */
.win-close::before,
.win-close::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1.5px; /* 增加厚度 */
  background-color: currentColor;
  top: 50%;
  left: 50%;
  border-radius: 0.5px; /* 添加圆角 */
}

.win-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.win-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 按钮悬停样式 */
#titlebar-minimize:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

#titlebar-minimize:hover .win-icon {
  opacity: 0.9;
}

#titlebar-maximize:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

#titlebar-maximize:hover .win-icon {
  opacity: 0.9;
}

#titlebar-close:hover {
  background-color: rgba(232, 17, 35, 0.9);
}

#titlebar-close:hover .win-icon {
  opacity: 1;
  color: white;
}

/* 深色模式按钮悬停样式 */
.dark-mode #titlebar-minimize:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode #titlebar-maximize:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode #titlebar-close:hover {
  background-color: rgba(232, 17, 35, 0.9);
}

.dark-mode .kill-btn {
  border-color: var(--app-danger-color);
  color: var(--app-danger-color);
}

.dark-mode .kill-btn:hover {
  background-color: rgba(255, 153, 164, 0.15);
  color: var(--app-danger-color);
  box-shadow: 0 2px 4px rgba(255, 153, 164, 0.15);
}

.dark-mode .kill-btn:active {
  background-color: rgba(255, 153, 164, 0.2);
  box-shadow: none;
}

.dark-mode .confirm-btn {
  background-color: var(--app-danger-color);
  border-color: transparent;
  color: #202020;
  box-shadow: 0 2px 4px rgba(255, 153, 164, 0.25);
}

.dark-mode .confirm-btn:hover {
  background-color: var(--app-danger-hover);
  box-shadow: 0 3px 6px rgba(255, 153, 164, 0.3);
}

.dark-mode .confirm-btn:active {
  background-color: var(--app-danger-active);
  box-shadow: 0 1px 2px rgba(255, 153, 164, 0.25);
}

.dark-mode .cancel-btn {
  background-color: #3D3D3D;
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.dark-mode .cancel-btn:hover {
  background-color: #454545;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode .cancel-btn:active {
  background-color: #383838;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 修复深色模式下的其他元素 */
.dark-mode .el-input__inner::placeholder {
  color: #999999;
}

.dark-mode .el-button {
  border-color: #444444;
}

.dark-mode .result-container {
  border: 1px solid var(--app-border-color);
}

.dark-mode .el-dialog {
  background-color: #2D2D2D;
}

.dark-mode .el-dialog__header {
  background-color: #323232;
  border-color: #3D3D3D;
}

.dark-mode .el-dialog__title {
  color: var(--app-text-color);
}

.dark-mode .el-dialog__body {
  color: var(--app-text-color);
}

.dark-mode .el-dialog__footer {
  border-top: 1px solid #3D3D3D;
}


.dark-mode .el-notification {
  background-color: #2D2D2D;
  border-color: #3D3D3D;
}

.dark-mode .el-notification__title,
.dark-mode .el-notification__content {
  color: var(--app-text-color);
}

.dark-mode .el-popper {
  background-color: #2D2D2D;
  border-color: #3D3D3D;
  color: var(--app-text-color);
}

.dark-mode .el-loading-mask {
  background-color: rgba(45, 45, 45, 0.9);
}

.dark-mode .el-loading-spinner {
  color: var(--app-primary-color);
}

/* 深色模式下搜索框清除按钮样式 */
.dark-mode .el-input__clear {
  color: #aaa;
}

.dark-mode .el-input__clear:hover {
  color: #fff;
  background-color: #454545;
}

.dark-mode .search-input .el-input-group__append {
  background-color: #333333;
  border-left: 1px solid #444444;
  border-color: transparent;
}

/* 表格操作和搜索结果高亮 */
.table-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.global-search-input {
  flex: 1;
  max-width: none;
}

.global-search-input .el-input__wrapper {
  border-radius: var(--app-border-radius);
  box-shadow: var(--app-input-shadow) !important;
  background-color: #ffffff;
  transition: var(--app-transition);
}

.global-search-input .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

.global-search-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--app-primary-color) !important;
}

/* 暗黑模式下搜索框样式 */
.dark-mode .global-search-input .el-input__wrapper {
  background-color: #333333;
  box-shadow: var(--app-input-shadow) !important;
  border-color: #444444;
}

.dark-mode .global-search-input .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.dark-mode .global-search-input .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px var(--app-primary-color) !important;
}

.dark-mode .global-search-input .el-input__inner {
  color: var(--app-text-color);
}

.dark-mode .global-search-input .el-input__inner::placeholder {
  color: #999999;
}

.dark-mode .global-search-input .el-input__prefix {
  color: #999999;
}

/* 分页控件样式 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.el-pagination {
  margin-right: 10px;
  padding: 0;
  --el-pagination-bg-color: #ffffff;
  --el-pagination-text-color: #606266;
  --el-pagination-button-color: #606266;
  --el-pagination-button-bg-color: #ffffff;
  --el-pagination-button-disabled-color: #c0c4cc;
  --el-pagination-button-disabled-bg-color: #ffffff;
  --el-pagination-hover-color: var(--app-primary-color);
}

/* 暗黑模式下的分页控件样式 */
.dark-mode .el-pagination {
  --el-pagination-bg-color: #2D2D2D;
  --el-pagination-text-color: #CCCCCC;
  --el-pagination-button-color: #CCCCCC;
  --el-pagination-button-bg-color: #2D2D2D;
  --el-pagination-button-disabled-color: #555555;
  --el-pagination-button-disabled-bg-color: #2D2D2D;
  --el-pagination-hover-color: var(--app-primary-color);
  --el-fill-color: #333333;
  --el-text-color-regular: #CCCCCC;
  --el-border-color: #3D3D3D;
}

.dark-mode .el-pagination button {
  background-color: #2D2D2D;
  color: #CCCCCC;
}

.dark-mode .el-pagination button:hover {
  color: var(--app-primary-color);
}

.dark-mode .el-pagination button:disabled {
  background-color: #2D2D2D;
  color: #555555;
}

.dark-mode .el-pagination .el-pager li {
  background-color: #333333;
  color: #CCCCCC;
}

.dark-mode .el-pagination .el-pager li.active {
  background-color: var(--app-primary-color);
  color: #202020;
}

.dark-mode .el-pagination .el-pager li:hover:not(.active) {
  color: var(--app-primary-color);
}

/* 下拉菜单样式 */
.dark-mode .el-select-dropdown {
  background-color: #333333;
  border-color: #444444;
}

.dark-mode .el-select-dropdown__item {
  color: #CCCCCC;
}

.dark-mode .el-select-dropdown__item.hover,
.dark-mode .el-select-dropdown__item:hover {
  background-color: #444444;
}

.dark-mode .el-select-dropdown__item.selected {
  color: var(--app-primary-color);
  font-weight: bold;
  background-color: transparent;
}

.dark-mode .el-scrollbar {
  background-color: #333333;
}

.dark-mode .el-input .el-select__caret {
  color: #999999;
}

.dark-mode .el-input-number {
  background-color: #333333;
}

.dark-mode .el-input-number__decrease,
.dark-mode .el-input-number__increase {
  background-color: #333333;
  color: #CCCCCC;
  border-color: #444444;
}

.dark-mode .el-input-number__decrease:hover,
.dark-mode .el-input-number__increase:hover {
  color: var(--app-primary-color);
}

.dark-mode .el-input-number .el-input__inner {
  background-color: #333333;
  color: #CCCCCC;
}

/* 输入框背景颜色 */
.dark-mode .el-input .el-input__wrapper {
  background-color: #333333;
}

/* 搜索框图标颜色 */
.dark-mode .el-input__prefix-inner .el-icon {
  color: #999999;
}

/* 筛选标签样式 */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  background-color: #f0f0f0;
  color: #505050;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.filter-tag:hover {
  background-color: #e0e0e0;
}

.filter-tag.active {
  background-color: #ecf5ff;
  color: #0078d4;
  font-weight: 500;
}

/* 主题按钮图标样式 */
.theme-button-icon {
  font-size: 16px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* 主题切换按钮 - 工具栏样式 */
.theme-toggle-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  transition: var(--app-transition);
  font-weight: 500;
  background: linear-gradient(to right, #f5f5f5, #e0e0e0);
  border: 1px solid #d0d0d0;
  color: #333;
  border-radius: 18px;
  min-width: 100px;
  justify-content: center;
}

.theme-toggle-button:hover {
  background: linear-gradient(to right, #ffffff, #eeeeee);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.theme-toggle-button:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

.dark-mode .theme-toggle-button {
  background: linear-gradient(to right, #333333, #3d3d3d);
  border-color: #444444;
  color: #f0f0f0;
  box-shadow: 0 0 10px rgba(96, 205, 255, 0.1);
}

.dark-mode .theme-toggle-button:hover {
  background: linear-gradient(to right, #3a3a3a, #4a4a4a);
  box-shadow: 0 0 15px rgba(96, 205, 255, 0.2);
}

.dark-mode .theme-toggle-button:active {
  box-shadow: 0 0 5px rgba(96, 205, 255, 0.15);
  transform: translateY(1px);
}

.filter-tag-icon {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-tag-label {
  line-height: 1;
}

.reset-tag {
  background-color: #f0f0f0;
  color: #666;
}

.reset-tag:hover {
  background-color: #ffebee;
  color: #d32f2f;
}

/* 暗色模式筛选标签 */
.dark-mode .filter-tag {
  background-color: #333333;
  color: #cccccc;
}

.dark-mode .filter-tag:hover {
  background-color: #444444;
}

.dark-mode .filter-tag.active {
  background-color: #193c5d;
  color: #60cdff;
}

.dark-mode .reset-tag {
  background-color: #333333;
  color: #cccccc;
}

.dark-mode .reset-tag:hover {
  background-color: #4a2c2c;
  color: #ff9ea3;
}

.protocol-filter {
  min-width: 150px;
}

.highlight-text {
  background-color: rgba(255, 210, 0, 0.3);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}

.dark-mode .highlight-text {
  background-color: rgba(255, 210, 0, 0.25);
  color: #FFD700;
}

/* 表格容器和分页样式 */
.table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.el-pagination {
  margin-right: 10px;
  padding: 0;
}

/* 表格滚动样式 */
.el-table {
  --el-table-scrollbar-color: rgba(0, 0, 0, 0.3);
  --el-table-scrollbar-hover-color: rgba(0, 0, 0, 0.5);
  width: 100% !important;
  overflow-x: auto !important;
  flex: 1;
}

.dark-mode .el-table {
  --el-table-scrollbar-color: rgba(255, 255, 255, 0.2);
  --el-table-scrollbar-hover-color: rgba(255, 255, 255, 0.3);
}

.el-table__body, 
.el-table__header {
  width: 100% !important;
  table-layout: fixed !important;
}

.el-table__inner-wrapper {
  height: 100%;
}

.result-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 排序图标样式 */
.sort-caret-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 14px;
  width: 14px;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;
}

/* 表格排序标题样式 */
.el-table .sort-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark-mode .el-table th.ascending .sort-icon,
.dark-mode .el-table th.descending .sort-icon {
  color: var(--app-primary-color);
}

.dark-mode .sort-caret-wrapper {
  color: var(--app-secondary-text);
}

/* 修复表头样式，确保表头不可选择 */
.el-table__header th {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* 防止搜索框内文本选择被禁用 */
.el-input__inner {
  user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
}

/* 完善分页控件和弹出框样式 */
.dark-mode .el-pagination .btn-prev,
.dark-mode .el-pagination .btn-next {
  background-color: #333333;
  color: #CCCCCC;
}

.dark-mode .el-pagination .el-pagination__jump {
  color: #CCCCCC;
}

.dark-mode .el-pagination .el-input__wrapper {
  background-color: #333333;
}

.dark-mode .el-pagination .el-input__inner {
  background-color: #333333;
  color: #CCCCCC;
}

.dark-mode .el-pagination .el-select .el-input {
  color: #CCCCCC;
}

.dark-mode .el-pagination .el-select .el-input .el-select__caret {
  color: #CCCCCC;
}

.dark-mode .el-pagination .el-pagination__sizes .el-input .el-input__inner {
  border-color: #3D3D3D;
}

.dark-mode .el-pagination .el-pagination__total {
  color: #CCCCCC;
}

/* 弹出框暗黑模式样式 */
.dark-mode .el-popper.is-light {
  background-color: #333333;
  border-color: #444444;
  color: #CCCCCC;
}

.dark-mode .el-popper.is-light .el-popper__arrow::before {
  background-color: #333333;
  border-color: #444444;
}

.dark-mode .el-select-dropdown {
  --el-select-dropdown-bg-color: #333333;
  --el-select-dropdown-hover-bg-color: #444444;
  --el-select-dropdown-item-hover-color: var(--app-primary-color);
}

/* 数字输入框样式 */
.dark-mode .el-input-number.is-controls-right {
  background-color: #333333;
}

.dark-mode .el-input-number.is-controls-right .el-input-number__decrease,
.dark-mode .el-input-number.is-controls-right .el-input-number__increase {
  background-color: #383838;
  border-color: #444444;
  color: #CCCCCC;
}

.dark-mode .el-input-number.is-controls-right .el-input-number__decrease:hover,
.dark-mode .el-input-number.is-controls-right .el-input-number__increase:hover {
  color: var(--app-primary-color);
}

/* 修复Element Plus暗黑模式下的背景颜色变量 */
.dark-mode {
  --el-bg-color: #2D2D2D;
  --el-bg-color-overlay: #333333;
  --el-fill-color-blank: #2D2D2D;
  --el-text-color-primary: #FFFFFF;
  --el-text-color-regular: #CCCCCC;
  --el-text-color-secondary: #AAAAAA;
  --el-border-color: #444444;
  --el-border-color-lighter: #3D3D3D;
  --el-border-color-light: #444444;
  --el-disabled-bg-color: #383838;
  --el-disabled-text-color: #777777;
  --el-fill-color: #333333;
  --el-fill-color-light: #383838;
  --el-fill-color-lighter: #3D3D3D;
  --el-fill-color-dark: #2D2D2D;
}


/* 消息淡出动画 */
@keyframes messageShow {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes messageFadeout {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}


</style>
